<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <video id="video"></video>

    <script>
      // 注：pc端台式机无摄像头查看不到视频，笔记本电脑可以
      // 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

      navigator.mediaDevices
        .getUserMedia({
          audio: true,
          video: true,
        })
        .then((stream) => {
          const video = document.getElementById("video");
          video.srcObject = stream;
          video.onloadedmetadata = function () {
            video.play();
          };
        })
        .catch((err) => {
          console.log(err);
        });
    </script>
  </body>
</html>
